<template>
  <div class="shop-comments">
      <Scroll class="content">
        <div class="comments-rating">
    <div class="rating-left">
        <div class="left-num">{{ info.score }}</div>
        <p class="left-description">综合评分</p>
        <p class="left-rate">高于周边商家{{ info.rankRate }}%</p>
    </div>
    <div class="rating-right">
        <div class="right-altitude">
        <span>服务态度</span>
        <Star :score="info.serviceScore" :size="36"></Star>
        <span class="score">{{ info.serviceScore }}</span>
        </div>
        <div class="right-foods">
        <span>商家评分</span>
        <Star :score="info.foodScore" :size="36"></Star>
        <span class="score">{{ info.foodScore }}</span>
        </div>
        <div class="right-time">
        <span>送达时间</span>
        <span class="time">{{ info.deliveryTime }}分钟</span>
        </div>
    </div>
        </div>
        <div class="comments-detail">
        <div class="detail-header">
            <div class="header-button_top">
            <div
                class="button-all button"
                :class="{ current: commendType === 2 }"
                @click="handleTypeClick(2)"
            >
                <span>全部</span>
                <span>{{ filterRatings.get(2).length }}</span>
            </div>
            <div
                class="button-good button"
                :class="{ current: commendType === 0 }"
                @click="handleTypeClick(0)"
            >
                <span>满意</span>
                <span>{{ filterRatings.get(0).length }}</span>
            </div>
            <div
                class="button-bad button"
                :class="{ current: commendType === 1 }"
                @click="handleTypeClick(1)"
            >
                <span>不满意</span>
                <span>{{ filterRatings.get(1).length }}</span>
            </div>
            </div>
            <div class="header-button_bottom">
            <van-checkbox v-model="isShowOnlyText">只看有内容的评价</van-checkbox>
            </div>
        </div>
        <div class="detail-list-wrapper">
            <ul>
            <li
                class="list-item"
                v-for="(item, index) in filterRatings.get(commendType)"
                :key="index"
            >
                <div class="item-left">
                <img :src="item.avatar" />
                </div>
                <div class="item-right">
                <p class="right-header">
                    <span class="header-username">{{ item.username }}</span>
                    <span class="header-time">
                    {{ item.rateTime |dateFormat}}
                    </span>
                </p>
                <p class="right-rate">
                    <Star :score="item.score" :size="24"></Star>
                    <span>{{ item.deliveryTime }}</span>
                </p>
                <P class="right-commends">{{ item.text }}</P>
                <div class="right-label">
                    <span class="label-logo"></span>
                    <span
                    class="label-recommend"
                    v-for="(food, index) in item.recommend"
                    :key="index"
                    >{{ food }}
                    </span>
                </div>
                </div>
            </li>
            </ul>
        </div>
        </div>
      </Scroll>
    
  </div>
</template>

<script>
import Scroll from 'components/common/Scroll/Scroll'
import 'components/common/untils'
import Star from 'components/common/Star/Star'
import 'components/common/untils'
import {mapState} from 'vuex'
export default {
    components: {
        Star,
        Scroll
    },
    computed: {
        ...mapState({
            info:state=>state.shop.info,
            ratings:state=>state.shop.ratings
        }),
        //将评论过滤下
        filterRatings(){
            let filterMap = new Map()
            let goodList = [] // 存放具有满意态度的评论信息
            let badList = [] // 存放不满意的
            let allList = [] // 所有评论
            allList = Array.from(this.ratings)
           
            allList.forEach(item => {
            //为0的是好评
            //根据不同的rateType放进不同数组
                item.rateType === 0 ? goodList.push(item) : badList.push(item)
             })
             // 是否显示只有内容的评价
             if (this.isShowOnlyText) {
                goodList = this.filterNoTextCommend(goodList)
                badList = this.filterNoTextCommend(badList)
                allList = this.filterNoTextCommend(allList)
            }
             // 存入map
             filterMap
            .set(0, goodList)
            .set(1, badList)
            .set(2, allList)
            return filterMap
        }
    },
    methods: {
         // 过滤无内容的评论
        filterNoTextCommend(list) {
            return list.filter(item => item.text)
        },
        handleTypeClick(num){
            console.log(num);
            this.commendType = num
        }
    },
    data () {
        return {
            commendType: 2,
            isShowOnlyText: true
        }
    },

    
};
</script>

<style lang="less" scoped>
.shop-comments{
    .comments-rating{
        margin: 20px 10px;
        display: flex;
        .rating-left{
            border-right: 4px solid #ccc;
            flex: 1;
            margin-left: 10px;
            .left-num{
                font-size: 18px;
                color: orange;
            }
        }
        .rating-right{
            flex: 2;
            margin-left: 10px;
        }
    }
    .comments-detail{
        .header-button_top{
            display: flex;
            .button{
                width: 100px;
                height: 40px;
                margin: 4px;
                text-align: center;
                line-height: 40px;
                background-color: #ccc;
             }
        }
        .detail-list-wrapper{
            .list-item{
                margin-top: 10px;
                display: flex;
                margin-bottom: 20px;
                .item-left{
                    margin-left: 10px;
                    img{
                        margin-right: 10px;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                    }
                }
            }
            
        }
        
    }
}
.label-recommend{
    margin-top: 8px;
    height: 17px;
    font-size: 12px;
    margin: 5px;
    border: 2px solid #ccc;
}
.current{
    background-color: pink !important;;
    color: white;
}
.shop-comments{
    height: 100vh; 
}
.content{
    overflow: hidden;
    height:calc(100% - 194px) ;
}
</style>
